import React, {Component} from 'react';
import './index.css';
import {InputNumber, Slider, Radio, Input} from 'antd';
import ColorPicker from '../../common/colorPicker/index';
import BaseOpts from '../BaseOpts';
import LinkWhere from '../../common/linkWhere/index';
import SlideInput from '../../common/SlideInput/index';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

class MButtonOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            dataset: {
                text: '',
                linkData: null,
            }
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            data: props.data,
        };
    }

    render() {
        var {style, dataset} = this.state.data;
        var marginTop = parseFloat(style.marginTop || 0);
        var marginBottom = parseFloat(style.marginBottom || 0);
        var paddingLeft = parseFloat(style.paddingLeft || 10);
        var {btnText} = dataset;

        return (
            <div className="optsPanel">
                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">按钮文案</label>
                    <div className="optsPanel__item__bd">
                        <div className="optsPanel__item__inputWrap">
                            <Input
                                defaultValue={btnText}
                                onInput={(e) => {
                                    this.$dataChange('btnText', e.target.value)
                                }}
                            />
                        </div>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">左右内边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} defaultValue={10} value={paddingLeft}
                                    onChange={(val) => {
                                        this.$dataChange(['paddingLeft', 'paddingRight'], [val + 'px', val + 'px'], 'style');
                                    }}
                        />
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">上外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} value={marginTop} onChange={(val) => {
                            this.$dataChange('marginTop', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">下外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} max={100} value={marginBottom} onChange={(val) => {
                            this.$dataChange('marginBottom', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item optsPanel__item_start">
                    <label className="optsPanel__item__hd">链接至</label>
                    <div className="optsPanel__item__bd">
                        <LinkWhere
                            onSelected={this._selected.bind(this)}
                            defaultLinkData={dataset.linkData}
                            defaultLinkType={dataset.linkType}
                        />
                    </div>
                </div>

            </div>
        );
    }

    _selected(linkData, linkType) {
        var data = this.state.data;

        data['dataset']['linkData'] = linkData;
        data['dataset']['linkType'] = linkType;

        this.setState({
            data
        });

        this.props.dataChange && this.props.dataChange(data);
    }
}

export default MButtonOpts;
